<ng-form name="routeForm">
  <fieldset ng-disabled="routingDisabled">

    <!-- Name -->
    <div ng-show="showNameInput" class="form-group">
      <label for="route-name" class="required">Name</label>
      <span ng-class="{ 'has-error': routeForm.name.$invalid && routeForm.name.$touched && !routingDisabled }">
        <input
            id="route-name"
            class="form-control"
            type="text"
            name="name"
            ng-model="route.name"
            ng-required="showNameInput"
            ng-pattern="nameValidation.pattern"
            ng-maxlength="nameValidation.maxlength"
            placeholder="my-route"
            select-on-focus
            autocorrect="off"
            autocapitalize="none"
            spellcheck="false"
            aria-describedby="route-name-help">
      </span>
      <div>
        <span id="route-name-help" class="help-block">A unique name for the route within the project.</span>
      </div>
      <div class="has-error" ng-show="routeForm.name.$error.pattern && routeForm.name.$touched && !routingDisabled">
        <span class="help-block">
          {{nameValidation.description}}
        </span>
      </div>
      <div class="has-error" ng-show="routeForm.name.$error.maxlength && routeForm.name.$touched && !routingDisabled">
        <span class="help-block">
          Can't be longer than {{nameValidation.maxlength}} characters.
        </span>
      </div>
    </div>

    <!-- Host -->
    <div class="form-group">
      <label for="host">Hostname</label>
      <span ng-class="{ 'has-error': routeForm.host.$invalid && routeForm.host.$touched && !routingDisabled }">
        <input
            id="host"
            class="form-control"
            type="text"
            name="host"
            ng-model="route.host"
            ng-pattern="hostnamePattern"
            ng-maxlength="hostnameMaxLength"
            ng-readonly="isHostnameReadOnly()"
            placeholder="www.example.com"
            autocorrect="off"
            autocapitalize="none"
            spellcheck="false"
            aria-describedby="route-host-help">
      </span>
      <div>
        <span id="route-host-help" class="help-block">
          <p>
            Public hostname for the route.
            <span ng-if="!hostReadOnly">
              If not specified, a hostname is generated.
            </span>
            <span ng-if="!disableWildcards">
              You can use <var>*.example.com</var> with routers that support wildcard subdomains.
            </span>
          </p>
          <p ng-if="(existingRoute || canICreateCustomHosts) && !canIUpdateCustomHosts">The hostname can't be changed after the route is created.</p>
        </span>
      </div>
      <div class="has-error" ng-show="routeForm.host.$error.pattern && routeForm.host.$touched && !routingDisabled">
        <span class="help-block">
          Hostname must consist of lower-case letters, numbers, periods, and
          hyphens. It must start and end with a letter or number.
          <span ng-if="!disableWildcards">Wildcard subdomains may start with <var>*.</var></span>
        </span>
      </div>
      <div class="has-error" ng-show="routeForm.host.$error.maxlength && routeForm.host.$touched && !routingDisabled">
        <span class="help-block">
          Can't be longer than {{hostnameMaxLength}} characters.
        </span>
      </div>
    </div>

    <!-- Path -->
    <div class="form-group">
      <label for="path">Path</label>
      <span ng-class="{ 'has-error': routeForm.path.$invalid && routeForm.path.$touched && !routingDisabled }">
        <input
            id="path"
            class="form-control"
            type="text"
            name="path"
            ng-model="route.path"
            ng-pattern="/^\/.*$/"
            ng-disabled="route.tls.termination === 'passthrough'"
            placeholder="/"
            autocorrect="off"
            autocapitalize="none"
            spellcheck="false"
            aria-describedby="route-path-help">
      </span>
      <div>
        <span id="route-path-help" class="help-block">
          Path that the router watches to route traffic to the service.
        </span>
      </div>
      <div class="has-error" ng-show="routeForm.path.$error.pattern && routeForm.path.$touched && !routingDisabled">
        <span class="help-block">
          Path must start with <code>/</code>
        </span>
      </div>
      <div class="has-warning" ng-show="route.path && route.tls.termination === 'passthrough'">
        <span class="help-block">
          Path value will not be used. Paths cannot be set for passthrough TLS.
        </span>
      </div>
    </div>

    <!-- Service -->
    <div ng-if="services">
      <osc-routing-service model="route.to"
                           service-options="services"
                           all-services="servicesByName"
                           show-weight="route.alternateServices.length > 1 || (controls.hideSlider && route.alternateServices.length)"
                           warn-unnamed-port="unnamedServicePort">
      </osc-routing-service>
    </div>

    <!-- Target Port -->
    <div ng-if="route.portOptions.length" class="form-group">
      <label for="routeTargetPort">Target Port</label>
      <ui-select ng-if="route.portOptions.length" ng-model="route.targetPort" input-id="routeTargetPort" search-enabled="false" aria-describedby="target-port-help">
        <ui-select-match>{{$select.selected.label}}</ui-select-match>
        <ui-select-choices repeat="portOption.port as portOption in route.portOptions">
          {{portOption.label}}
        </ui-select-choices>
      </ui-select>
      <div>
        <span id="target-port-help" class="help-block">
          Target port for traffic.
        </span>
      </div>
    </div>


    <!-- Alternate Services for A/B Traffic -->
    <div ng-if="alternateServiceOptions.length">
      <h3>Alternate Services</h3>
      <div class="form-group">
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="options.alternateServices" aria-describedby="secure-route-help">
            Split traffic across multiple services
          </label>
          <div class="help-block">
            Routes can direct traffic to multiple services for A/B testing. Each service has a weight
            controlling how much traffic it gets.
          </div>
        </div>
      </div>

      <div ng-repeat="alternate in route.alternateServices" class="form-group">
        <osc-routing-service
          model="alternate"
          service-options="alternateServiceOptions"
          all-services="servicesByName"
          is-alternate="true"
          show-weight="route.alternateServices.length > 1 || controls.hideSlider">
        </osc-routing-service>
        <div class="row form-group-actions">
          <div class="col-sm-6">
            <button type="button" class="btn btn-link" ng-click="route.alternateServices.splice($index, 1)">Remove Service</button>
            <span ng-if="$last && route.alternateServices.length < alternateServiceOptions.length">
              <span class="action-divider">|</span>
              <button type="button" class="btn btn-link" ng-click="addAlternateService()">Add Another Service</button>
            </span>
          </div>
          <div ng-if="route.alternateServices.length === 1 && controls.hideSlider" class="col-sm-6">
            <button type="button" class="btn btn-link" ng-click="controls.hideSlider = false">Edit Weights Using Percentage Slider</button>
          </div>
        </div>
      </div>
      <div ng-repeat="duplicate in duplicateServices" class="has-error mar-bottom-lg">
        <span class="help-block">
          Service {{duplicate.metadata.name}} cannot be added twice.
        </span>
      </div>
    </div>

    <!-- If there is exactly one alternate service, let the user change the weights using a slider. -->
    <div ng-if="route.alternateServices.length === 1 && !controls.hideSlider">
      <h3>Service Weights</h3>
      <div class="form-group">
        <div class="weight-slider-values">
          <div>
            <span class="service-name">{{route.to.name}}</span>
            <span class="weight-percentage">{{weightAsPercentage(route.to.weight, true)}}</span>
          </div>
          <div>
            <span class="weight-percentage hidden-xs">{{weightAsPercentage(route.alternateServices[0].weight, true)}}</span>
            <span class="service-name">{{route.alternateServices[0].name}}</span>
            <span class="weight-percentage visible-xs-inline">{{weightAsPercentage(route.alternateServices[0].weight, true)}}</span>
          </div>
        </div>
        <label class="sr-only" for="weight-slider">Service {{route.to.service.metadata.name}} Weight</label>
        <input
            id="weight-slider"
            type="range"
            min="0"
            max="100"
            step="1"
            list="ticks"
            ng-model="controls.rangeSlider"
            aria-describedby="weight-slider-help"
            class="mar-top-md">
        <datalist id="ticks">
          <option>0</option>
          <option>25</option>
          <option>50</option>
          <option>75</option>
          <option>100</option>
        </datalist>
        <div class="help-block" id="weight-slider-help">
          Percentage of traffic sent to each service. Drag the slider to adjust the values or
          <button type="button" class="btn btn-link" ng-click="controls.hideSlider = true">edit weights as integers</button>.
        </div>
      </div>
    </div>

    <h3>Security</h3>
    <div class="checkbox">
      <label>
        <input type="checkbox" ng-model="options.secureRoute" aria-describedby="secure-route-help">
        Secure route
      </label>
      <div class="help-block" id="secure-route-help">
        Routes can be secured using several TLS termination types for serving certificates.
      </div>
    </div>

    <div ng-show="options.secureRoute">
      <!-- TLS Termination -->
      <div class="form-group">
        <label for="tlsTermination">TLS Termination</label>
        <ui-select ng-model="route.tls.termination" input-id="tlsTermination" search-enabled="false">
          <ui-select-match>{{$select.selected | humanizeTLSTermination}}</ui-select-match>
          <ui-select-choices repeat="option in ['edge', 'passthrough', 'reencrypt']">
            {{option | humanizeTLSTermination}}
          </ui-select-choices>
        </ui-select>
        <div class="learn-more-block help-block">
          <a href="{{'route-types' | helpLink}}" target="_blank">Learn More&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></a>
        </div>
      </div>

      <!-- Insecure Edge Termination Policy -->
      <div class="form-group">
        <label for="insecureTraffic">Insecure Traffic</label>
        <!-- Since we can't give the ui-select field a name, create a hidden input for Angular form validation. -->
        <input type="hidden" name="insecureTraffic">
        <ui-select ng-model="route.tls.insecureEdgeTerminationPolicy"
            name="insecureTraffic"
            input-id="insecureTraffic"
            aria-describedby="route-insecure-policy-help"
            search-enabled="false">
          <ui-select-match>{{$select.selected.label}}</ui-select-match>
          <ui-select-choices
              repeat="option.value as option in insecureTrafficOptions"
              ui-disable-choice="route.tls.termination === 'passthrough' && option.value === 'Allow'">
            {{option.label}}
          </ui-select-choices>
        </ui-select>
        <div>
          <span id="route-insecure-policy-help" class="help-block">
            Policy for traffic on insecure schemes like HTTP.
          </span>
        </div>
        <div ng-if="routeForm.insecureTraffic.$error.passthrough" class="has-warning">
          <span class="help-block">
            Passthrough routes can't use the insecure traffic policy <var>Allow</var>.
          </span>
        </div>
      </div>

      <!-- Key and Certificates -->
      <h3>Certificates</h3>
      <div class="help-block">
        TLS certificates for edge and re-encrypt termination. If not specified, the router's default
        certificate is used.
      </div>
      <div ng-if="showCertificatesNotUsedWarning" class="has-warning">
        <span class="help-block">
          The certificate or key you've set will not be used.
          <span ng-if="!route.tls.termination">
            The route is unsecured.
          </span>
          <span ng-if="route.tls.termination === 'passthrough'">
            Custom certificates cannot be used with passthrough termination.
          </span>
        </span>
      </div>
      <fieldset class="mar-top-md">
        <div>
          <div class="form-group" id="certificate-file">
            <label>Certificate</label>
            <osc-file-input
              model="route.tls.certificate"
              drop-zone-id="certificate-file"
              show-text-area="true"
              help-text="The PEM format certificate. Upload file by dragging & dropping, selecting it, or pasting from the clipboard."
              ng-readonly="areCertificateInputsReadOnly()"
              ng-disabled="areCertificateInputsDisabled()">
            </osc-file-input>
          </div>
          <div class="form-group" id="private-key-file">
            <label>Private Key</label>
            <osc-file-input
              model="route.tls.key"
              drop-zone-id="private-key-file"
              show-text-area="true"
              help-text="The PEM format key. Upload file by dragging & dropping, selecting it, or pasting from the clipboard."
              ng-readonly="areCertificateInputsReadOnly()"
              ng-disabled="areCertificateInputsDisabled()">
          </osc-file-input>
          </div>
          <div class="form-group" id="ca-certificate-file">
            <label>CA Certificate</label>
            <osc-file-input
              model="route.tls.caCertificate"
              drop-zone-id="ca-certificate-file"
              show-text-area="true"
              help-text="The PEM format CA certificate chain. Upload file by dragging & dropping, selecting it, or pasting from the clipboard."
              ng-readonly="areCertificateInputsReadOnly()"
              ng-disabled="areCertificateInputsDisabled()">
            </osc-file-input>
          </div>
          <div class="form-group" id="dest-ca-certificate-file">
            <label>Destination CA Certificate</label>
            <osc-file-input
                model="route.tls.destinationCACertificate"
                show-text-area="true"
                drop-zone-id="dest-ca-certificate-file"
                help-text="The PEM format CA certificate chain to validate the endpoint certificate for re-encrypt termination. Upload file by dragging & dropping, selecting it, or pasting from the clipboard."
                ng-readonly="areCertificateInputsReadOnly()"
                ng-disabled="isDestinationCACertInputDisabled()">
            </osc-file-input>
            <!-- Show a warning if the value won't be used, but only if we're
                 not already showing the generic certificate warning above. -->
            <div ng-if="route.tls.destinationCACertificate && route.tls.termination !== 'reencrypt' && !showCertificatesNotUsedWarning" class="has-warning">
              <span class="help-block">
                The destination CA certificate will be removed from the route.
                Destination CA certificates are only used for re-encrypt termination.
              </span>
            </div>
          </div>
        </div>
      </fieldset>
    </div>
  </fieldset>
</ng-form>
